ഫ്രണ്ടെൻഡ് കോഡ് സ്പ്ലിറ്റിംഗ്: റൂട്ട് അധിഷ്ഠിതവും കോമ്പൊണന്റ് അധിഷ്ഠിതവും

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

ഈ ഉദാഹരണത്തിൽ, React.lazy(), ഡൈനാമിക് ഇംപോർട്ടുകൾ എന്നിവ ഉപയോഗിച്ച് Home, About കോമ്പൊണന്റുകൾ ലേസിയായി ലോഡ് ചെയ്യുന്നു. കോമ്പൊണന്റുകൾ ലോഡ് ചെയ്യുമ്പോൾ Suspense കോമ്പൊണൻ്റ് ഒരു ഫോൾബാക്ക് UI നൽകുന്നു. റിയാക്റ്റ് റൂട്ടർ നാവിഗേഷൻ കൈകാര്യം ചെയ്യുകയും നിലവിലെ റൂട്ടിനെ അടിസ്ഥാനമാക്കി ശരിയായ കോമ്പൊണൻ്റ് റെൻഡർ ചെയ്യുന്നത് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണം (ആംഗുലർ)

ആംഗുലറിൽ, റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗ് ലേസി-ലോഡഡ് മൊഡ്യൂളുകൾ ഉപയോഗിച്ച് നേടിയെടുക്കുന്നു.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

ഇവിടെ, റൂട്ട് കോൺഫിഗറേഷനിലെ loadChildren പ്രോപ്പർട്ടി ലേസിയായി ലോഡ് ചെയ്യേണ്ട മൊഡ്യൂളിൻ്റെ പാത വ്യക്തമാക്കുന്നു. ആംഗുലറിൻ്റെ റൂട്ടർ സ്വയം മൊഡ്യൂൾ അതിൻ്റെ അനുബന്ധ കോമ്പൊണൻ്റുകളും ലോഡ് ചെയ്യും, ഉപയോക്താവ് അനുബന്ധ റൂട്ടിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ മാത്രം.

ഉദാഹരണം (വ്യൂ.ജെഎസ്)

വ്യൂ.ജെഎസ് റൂട്ടർ കോൺഫിGറേഷനിൽ ഡൈനാമിക് ഇംപോർട്ടുകൾ ഉപയോഗിച്ച് റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗിനെ പിന്തുണയ്ക്കുന്നു.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

റൂട്ട് കോൺഫിGറേഷനിലെ component ഓപ്ഷൻ കോമ്പൊണൻ്റ് അസിൻക്രണസ് ആയി ലോഡ് ചെയ്യാൻ ഒരു ഡൈനാമിക് ഇംപോർട്ട് ഉപയോഗിക്കുന്നു. റൂട്ട് ലഭ്യമാകുമ്പോൾ കോമ്പൊണൻ്റിൻ്റെ ലോഡിംഗും റെൻഡറിംഗും വ്യൂ റൂട്ടർ കൈകാര്യം ചെയ്യും.

റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗിൻ്റെ ഗുണങ്ങൾ

• നടപ്പിലാക്കാൻ ലളിതം: റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കാൻ താരതമ്യേന ലളിതമാണ്, പ്രത്യേകിച്ച് ആധുനിക ഫ്രെയിംവർക്കുകൾ നൽകുന്ന പിന്തുണയോടെ.
• വ്യക്തമായ വേർതിരിവ്: ഓരോ റൂട്ടും ആപ്ലിക്കേഷൻ്റെ ഒരു പ്രത്യേക വിഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നു, ഇത് കോഡിനെയും അതിൻ്റെ ഡിപൻഡൻസികളെയും മനസ്സിലാക്കാൻ എളുപ്പമാക്കുന്നു.
• വലിയ ആപ്ലിക്കേഷനുകൾക്ക് ഫലപ്രദം: ധാരാളം റൂട്ടുകളും സവിശേഷതകളുമുള്ള വലിയ ആപ്ലിക്കേഷനുകൾക്ക് റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗ് പ്രത്യേകിച്ച് പ്രയോജനകരമാണ്.

റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗിൻ്റെ ദോഷങ്ങൾ

• മതിയായ ഗ്രാനുലാരിറ്റി ഇല്ലായിരിക്കാം: ഒന്നിലധികം റൂട്ടുകളിലുടനീളം പങ്കിടുന്ന സങ്കീർണ്ണമായ കോമ്പൊണന്റുകളുള്ള ആപ്ലിക്കേഷനുകൾക്ക് റൂട്ട് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗ് പര്യാപ്തമല്ലാത്തതാകാം.
• പ്രാരംഭ ലോഡ് സമയം ഇപ്പോഴും ഉയർന്നതായിരിക്കാം: ഒരു റൂട്ടിൽ ധാരാളം ഡിപൻഡൻസികൾ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ആ റൂട്ടിൻ്റെ പ്രാരംഭ ലോഡ് സമയം ഇപ്പോഴും ഗണ്യമായിരിക്കാം.

കോമ്പൊണന്റ് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗ്

കോമ്പൊണന്റ് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗ് കോഡ് സ്പ്ലിറ്റിംഗിനെ ഒരു പടി കൂടി മുന്നോട്ട് കൊണ്ടുപോകുന്നു, ഇത് ആപ്ലിക്കേഷൻ കോഡിനെ വ്യക്തിഗത കോമ്പൊണന്റുകളെ അടിസ്ഥാനമാക്കി ചെറിയ ചങ്കുകളായി വിഭജിക്കുന്നു. ഈ സമീപനം കോഡ് ലോഡിംഗിന് കൂടുതൽ ഗ്രാനുലാർ നിയന്ത്രണം അനുവദിക്കുകയും സങ്കീർണ്ണമായ UI കൾക്കും പുനരുപയോഗിക്കാവുന്ന കോമ്പൊണന്റുകൾക്കുമുള്ള ആപ്ലിക്കേഷനുകൾക്ക് പ്രത്യേകിച്ചും ഫലപ്രദമാവുകയും ചെയ്യും.

നടപ്പാക്കൽ

കോമ്പൊണന്റ് അധിഷ്ഠിത കോഡ് സ്പ്ലിറ്റിംഗും ഡൈനാമിക് ഇംപോർട്ടുകളെ ആശ്രയിക്കുന്നു, എന്നാൽ മുഴുവൻ റൂട്ടുകളും ലോഡ് ചെയ്യുന്നതിനുപകരം, വ്യക്തിഗത കോമ്പൊണന്റുകൾ ആവശ്യാനുസരണം ലോഡ് ചെയ്യുന്നു. ഇത് താഴെ പറയുന്ന ടെക്നിക്കുകൾ ഉപയോഗിച്ച് നേടിയെടുക്കാൻ കഴിയും:

1. കോമ്പൊണന്റുകൾ ലേസിയായി ലോഡ് ചെയ്യുക: അവ ആവശ്യാനുസരണം, അതായത് ആദ്യമായി റെൻഡർ ചെയ്യുമ്പോൾ അല്ലെങ്കിൽ ഒരു പ്രത്യേക ഇവൻ്റ് സംഭവിക്കുമ്പോൾ മാത്രം കോമ്പൊണന്റുകൾ ലോഡ് ചെയ്യാൻ ഡൈനാമിക് ഇംപോർട്ടുകൾ ഉപയോഗിക്കുക.
2. Conditional Rendering: ഉപയോക്തൃ ഇടപെടൽ അല്ലെങ്കിൽ മറ്റ് ഘടകങ്ങളെ അടിസ്ഥാനമാക്കി കോമ്പൊണന്റുകൾ കണ്ടീഷണലായി റെൻഡർ ചെയ്യുക, കണ്ടീഷൻ നിറവേറ്റപ്പെടുമ്പോൾ മാത്രം കോമ്പൊണൻ്റ് കോഡ് ലോഡ് ചെയ്യുക.
3. Intersection Observer API: ഒരു കോമ്പൊണൻ്റ് വ്യൂപോർട്ടിൽ ദൃശ്യമാണോ എന്ന് കണ്ടെത്താനും അതിൻ്റെ കോഡ് അതിനനുസരിച്ച് ലോഡ് ചെയ്യാനും Intersection Observer API ഉപയോഗിക്കുക. തുടക്കത്തിൽ ഓഫ്-സ്‌ക്രീനിൽ കാണുന്ന കോമ്പൊണന്റുകൾ ലോഡ് ചെയ്യാൻ ഇത് വളരെ ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം (റിയാക്റ്റ്)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>